<template>
  <el-menu
    class="el-menu-vertical-demo"
   :collapse="$store.state.sys.collapse"
   unique-opened
   router
    >
    <template v-for="(item,index) in menus"  >
                       <el-submenu :index="item.path" v-if="!item.leaf&&item.meta.isLink" :key="index"  >
                           <template slot="title">
                               <span class="collapse-font" slot="title">{{item.name}}</span>
                          </template>
                        <template v-for="(child) in item.children" >
                             <el-menu-item
                                     :index="child.path"
                                     :key="child.path"
                                      class="parent-padding"
                                     >
                                     {{child.name}}
                             </el-menu-item>
                      </template>

                     </el-submenu>
                     <el-menu-item v-if="item.leaf&&item.meta.isLink" :index="item.path" class="first-item" :key="index" >
                         <span class="collapse-font " slot="title">{{item.name}}</span>
                     </el-menu-item>
                 </template>
  </el-menu>
</template>
<script>
import {routes} from '@/router/routes'
export default {
    name:"main-siderBar",
    data(){
      return{
        menus:routes
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
  </script>
